<%@page import="org.ifilm.model.Project"%>
<%@ page import="org.ifilm.model.User,org.ifilm.util.GeneralConstants"%>
<!-- %@page import="org.ifilm.util.GeneralConstants"%>  -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	//TEST TO CHECK WHETHER LOGGED USER IS IN OUR SESSION OR NOT
	User loggedUser = (User) session
			.getAttribute(GeneralConstants.user);

	if (loggedUser != null) {
		System.out.println(loggedUser.getEmail());
	} else {
		System.out.println("No user in session!");
	}
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Create Project</title>

<link href="/film/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="/film/js/jquery.js"></script>
<script src="/film/bootstrap/js/bootstrap.min.js"></script>

<style>
/* 60px to make the container go all the way to the bottom of the topbar */
body {
	padding-top: 60px;
}
/* these are used to keep dropdownlists visible which are in an accordion*/
​.accordion-body.in {
	overflow: visible;
}

.accordion-body.in:hover {
	overflow: visible;
}
</style>
</head>
<body>
	<!-- this area is used for the navigation bar -->
	<!-- where the navigation bar has ifilm home create project sections -->
	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="brand" href="#">iFilm</a>
				<ul class="nav">
					<li><a href="/film/home.jsp">Home Draft</a></li>
					<li class="active"><a href="/film/createProject.jsp">Create
							Project</a></li>
					<li><a href="/film/createProjectNew.jsp">Create
							Project New</a></li>
					<li><a href="#">PAGE</a></li>
					<li><a href="#">PAGE</a></li>
				</ul>
				<div class="navbar-text pull-right">
					<a href='/film/userProfile.jsp' class="navbar-link"><%=loggedUser.getName() + " " + loggedUser.getSurname()%>
					</a> <a href='#' id="logout" class="navbar-link">Logout</a>
				</div>
			</div>
		</div>
	</div>
	<!-- In this part, we will get project(film) properties from user such as -->
	<!-- project name, filming location, film subject, language -->
	<!-- start date and estimated shooting time -->
	<div class="container">
		<form method="POST" action="/film/project/createProject.do">
			<table class="table table-condensed">
				<!-- in this row we get project name -->
				<tr>
					<td>Project Name:</td>
					<td><input type="text"
						name="<%=GeneralConstants.projectName%>"></td>
				</tr>
				<!-- in this row we get filming location -->
				<!-- location will be specified as country and city -->
				<tr>
					<td>Filming Location:</td>
					<td>
						<div class="btn-group">
							<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
								Country<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li>Turkey</li>
								<li>Germany</li>
								<li>USA</li>
							</ul>
						</div>
						<div class="btn-group">
							<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
								City<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a tabindex="-1" href="#">Istanbul</a></li>
								<li><a tabindex="-1" href="#">Ankara</a></li>
								<li><a tabindex="-1" href="#">Izmır</a></li>
							</ul>
						</div>
					</td>
				</tr>
				<!-- in this row we get film subject -->
				<tr>
					<td>Film Subject:</td>
					<td><input type="text"></td>
				</tr>
				<!-- in this row we get language of the film -->
				<tr>
					<td>Language:</td>
					<td><input type="text"></td>
				</tr>
				<!-- in this row we get start time of the film -->
				<!-- this will be in the format day month year -->
				<tr>
					<td>Filming start date:</td>
					<td>
						<div class="btn-group">
							<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
								Day<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a tabindex="-1" href="#">1</a></li>
							</ul>
						</div>
						<div class="btn-group">
							<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
								Month<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a tabindex="-1" href="#">Ocak</a></li>
							</ul>
						</div>
						<div class="btn-group">
							<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
								Year<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a tabindex="-1" href="#">2012</a></li>
							</ul>
						</div>
					</td>
				</tr>
				<!-- in this row we get estimated shooting time of the film -->
				<!-- this will be given as number of days -->
				<tr>
					<td>Estimated shooting time:</td>
					<td>
						<div class="btn-group">
							<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
								Days<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a tabindex="-1" href="#">100</a></li>
							</ul>
						</div>
					</td>
				</tr>
				<!-- this is the fundamental part of create project -->
				<!-- users will define resources such as actors, cameraman etc here -->
				<tr>
					<td colspan=2>Human Resources:</td>
				</tr>
				<tr>
					<td colspan=2>
						<!-- each accordion will be devoted to a different department -->
						<!-- these departments are production, art, costume, camera,voice -->
						<!-- set light and montage, visual effects, sound and music -->
						<div class="accordion" id="accordionDepartments">
							<!-- let me briefly explain one of these accordions -->
							<!-- each accordeon has heading and inner parts -->
							<!-- in the heading we write the department(ex:production) -->
							<!-- in the inner we have job types for that department -->
							<!-- ex:production manager, script superviser  -->
							<!-- we want user to create job postings for the jobs they need -->
							<!-- with a given desciption and number -->
							<!-- ex: sarısın mavi gözlü 3 bayan aktris arıyorum -->
							<div class="accordion-group">
								<!-- this is heading -->
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse"
										data-parent="#accordionDepartments" href="#collapseProduction">Production</a>
								</div>
								<!-- this is inner part of the department -->
								<!-- user will select a job from dropdownlist -->
								<!-- that list will be inserted into a list where user can specify -->
								<!-- description and number -->
								<div id="collapseProduction" class="accordion-body collapse in">
									<div class="accordion-inner">
										<table>
											<tr>
												<td>
													<div class="btn-group">
														<a class="btn dropdown-toggle" data-toggle="dropdown"
															href="#">Jobs<span class="caret"></span>
														</a>
														<ul class="dropdown-menu">
															<!-- dropdown menu links -->
															<li><a tabindex="-1" href="#">Production Manager</a></li>
															<li><a tabindex="-1" href="#">Script Supervisor</a></li>
															<li><a tabindex="-1" href="#">Producer</a></li>
														</ul>
													</div>
												</td>
												<td>
													<table>
														<tr>
															<td>Job</td>
															<td>Description</td>
															<td>Number</td>
															<td>Remove</td>
														</tr>
														<tr>
															<td>Producer</td>
															<td><input type="text"></td>
															<td><div class="btn-group">
																	<a class="btn dropdown-toggle" data-toggle="dropdown"
																		href="#">Number<span class="caret"></span>
																	</a>
																	<ul class="dropdown-menu">
																		<!-- dropdown menu links -->
																		<li><a tabindex="-1" href="#">1</a></li>
																		<li><a tabindex="-1" href="#">2</a></li>
																		<li><a tabindex="-1" href="#">3</a></li>
																		<li><a tabindex="-1" href="#">4</a></li>
																	</ul>
																</div></td>
															<td><input type="checkbox" /></td>
														</tr>
														<tr>
															<td>Production Manager</td>
															<td><input type="text"></td>
															<td><div class="btn-group">
																	<a class="btn dropdown-toggle" data-toggle="dropdown"
																		href="#">Number<span class="caret"></span>
																	</a>
																	<ul class="dropdown-menu">
																		<!-- dropdown menu links -->
																		<li><a tabindex="-1" href="#">1</a></li>
																		<li><a tabindex="-1" href="#">2</a></li>
																		<li><a tabindex="-1" href="#">3</a></li>
																		<li><a tabindex="-1" href="#">4</a></li>
																	</ul>
																</div></td>
															<td><input type="checkbox" /></td>
														</tr>
														<tr>
															<td>Script Supervisor</td>
															<td><input type="text"></td>
															<td><div class="btn-group">
																	<a class="btn dropdown-toggle" data-toggle="dropdown"
																		href="#">Number<span class="caret"></span>
																	</a>
																	<ul class="dropdown-menu">
																		<!-- dropdown menu links -->
																		<li><a tabindex="-1" href="#">1</a></li>
																		<li><a tabindex="-1" href="#">2</a></li>
																		<li><a tabindex="-1" href="#">3</a></li>
																		<li><a tabindex="-1" href="#">4</a></li>
																	</ul>
																</div></td>
															<td><input type="checkbox" /></td>
														</tr>
													</table>
												</td>
											</tr>
										</table>
									</div>
								</div>
								<div class="accordion-group">
									<div class="accordion-heading">
										<a class="accordion-toggle" data-toggle="collapse"
											data-parent="#accordionDepartments" href="#collapseTwo">Actors</span>
										</a>
									</div>
									<div id="collapseTwo" class="accordion-body collapse in">
										<div class="accordion-inner"></div>
									</div>
								</div>
								<div class="accordion-group">
									<div class="accordion-heading">
										<a class="accordion-toggle" data-toggle="collapse"
											data-parent="#accordionDepartments" href="#collapseThree">Art
											Department </a>
									</div>
									<div id="collapseThree" class="accordion-body collapse in">
										<div class="accordion-inner">Art Department</div>
									</div>
								</div>
								<div class="accordion-group">
									<div class="accordion-heading">
										<a class="accordion-toggle" data-toggle="collapse"
											data-parent="#accordionDepartments" href="#collapseFour">Costume
											Department</a>
									</div>
									<div id="collapseFour" class="accordion-body collapse in">
										<div class="accordion-inner"></div>
									</div>
								</div>
							</div>
							<div class="accordion-group">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse"
										data-parent="#accordionDepartments"
										href="#collapseCameraDepartment">Camera Department</a>
								</div>
								<div id="collapseCameraDepartment"
									class="accordion-body collapse in">
									<div class="accordion-inner">
										<table>
											<tr>
												<td>
													<div class="btn-group">
														<a class="btn dropdown-toggle" data-toggle="dropdown"
															href="#">Jobs<span class="caret"></span>
														</a>
														<ul class="dropdown-menu">
															<!-- dropdown menu links -->
															<li><a tabindex="-1" href="#">Production Manager</a></li>
															<li><a tabindex="-1" href="#">Script Supervisor</a></li>
															<li><a tabindex="-1" href="#">Producer</a></li>
														</ul>
													</div>
												</td>
												<td>

													<table>
														<tr>
															<td>Job</td>
															<td>Description</td>
															<td>Number</td>
														</tr>
														<tr>
															<td>Director of Photography</td>
															<td><input type="text"></td>
															<td><div class="btn-group">
																	<a class="btn dropdown-toggle" data-toggle="dropdown"
																		href="#">Number<span class="caret"></span>
																	</a>
																	<ul class="dropdown-menu">
																		<!-- dropdown menu links -->
																		<li><a tabindex="-1" href="#">1</a></li>
																		<li><a tabindex="-1" href="#">2</a></li>
																		<li><a tabindex="-1" href="#">3</a></li>
																		<li><a tabindex="-1" href="#">4</a></li>
																	</ul>
																</div></td>
														</tr>
														<tr>
															<td>Cinematographer</td>
															<td><input type="text"></td>
															<td><div class="btn-group">
																	<a class="btn dropdown-toggle" data-toggle="dropdown"
																		href="#">Number<span class="caret"></span>
																	</a>
																	<ul class="dropdown-menu">
																		<!-- dropdown menu links -->
																		<li><a tabindex="-1" href="#">1</a></li>
																		<li><a tabindex="-1" href="#">2</a></li>
																		<li><a tabindex="-1" href="#">3</a></li>
																		<li><a tabindex="-1" href="#">4</a></li>
																	</ul>
																</div></td>
														</tr>
													</table>
												</td>
											</tr>
										</table>
									</div>
								</div>
							</div>
							<div class="accordion-group">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse"
										data-parent="#accordionDepartments" href="#collapseSix">Voice
										Department</a>
								</div>
								<div id="collapseSix" class="accordion-body collapse in">
									<div class="accordion-inner"></div>
								</div>
							</div>
							<div class="accordion-group">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse"
										data-parent="#accordionDepartments" href="#collapseSeven">Set,
										Light and Montage Department</a>
								</div>
								<div id="collapseSeven" class="accordion-body collapse in">
									<div class="accordion-inner"></div>
								</div>
							</div>
							<div class="accordion-group">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse"
										data-parent="#accordionDepartments" href="#collapseEight">Visual
										Effects Department</a>
								</div>
								<div id="collapseEight" class="accordion-body collapse in">
									<div class="accordion-inner"></div>
								</div>
							</div>
							<div class="accordion-group">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse"
										data-parent="#accordionDepartments" href="#collapseNine">Sound
										and Music</a>
								</div>
								<div id="collapseNine" class="accordion-body collapse in">
									<div class="accordion-inner"></div>
								</div>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan=2>Equipment Resources:</td>
				</tr>
				<tr>
					<td colspan=2>
						<!-- each accordion will be devoted to a different department -->
						<!-- these departments are production, art, costume, camera,voice -->
						<!-- set light and montage, visual effects, sound and music -->
						<div class="accordion" id="accordionDepartments">
							<div class="accordion-group">
								<!-- this is heading -->
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse"
										data-parent="#accordionDepartments"
										href="#collapseProduction2">Production</a>
								</div>
								<!-- this is inner part of the department -->
								<!-- user will select a job from dropdownlist -->
								<!-- that list will be inserted into a list where user can specify -->
								<!-- description and number -->
								<div id="collapseProduction2" class="accordion-body collapse in">
									<div class="accordion-inner"></div>
								</div>
							</div>
							<div class="accordion-group">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse"
										data-parent="#accordionDepartments" href="#collapseThree2">Art
										Department </a>
								</div>
								<div id="collapseThree2" class="accordion-body collapse in">
									<div class="accordion-inner"></div>
								</div>
							</div>
							<div class="accordion-group">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse"
										data-parent="#accordionDepartments" href="#collapseFour2">Costume
										Department</a>
								</div>
								<div id="collapseFour2" class="accordion-body collapse in">
									<div class="accordion-inner">
										<ul>
											<li>Costume</li>
											<li>Makeup</li>
										</ul>
									</div>
								</div>
							</div>

							<div class="accordion-group">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse"
										data-parent="#accordionDepartments"
										href="#collapseCameraDepartment2">Camera Department</a>
								</div>
								<div id="collapseCameraDepartment2"
									class="accordion-body collapse in">
									<div class="accordion-inner">
										<ul>
											<li>Camera</li>
											<li>Lens</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="accordion-group">
								<div class="accordion-heading">
									<a class="accordion-toggle" data-toggle="collapse"
										data-parent="#accordionDepartments"
										href="#collapseSetLightMontageDepartment2">Set Light and Montage Department</a>
								</div>
								<div id="collapseSetLightMontageDepartment2"
									class="accordion-body collapse in">
									<div class="accordion-inner">
										<ul>
											<li>Boom</li>
											<li>Microphone</li>
											<li>Lights</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan=2><input type="submit" value="Create"></td>
				</tr>
			</table>
		</form>
	</div>
</body>
<script type="text/javascript">
	$('.dropdown-toggle').dropdown();
	$(".collapse").collapse();
	$("#logout").click(function() {
		$.ajax("/film/user/logout.do").done(function() {
			window.location.href = "/film";
		});
	});
</script>
</html>